<template>
  <div id="app">
    <TopBar :key="$root.count" @openWeChat="openWeChat" />
    <Header />
    <!-- 路由出口 -->
    <router-view @change="changeCarFn" />

    <Footer />
    <Login v-if="isShowLoginModal" ref="wxCode" />
    <transition name="fade">
      <Toast v-show="isShowToastModal" />
    </transition>
  </div>
</template>

<script>
/*

//缺点1: 每次请求都需要输入域名地址, 解决:使用request.js封装axios
    //缺点2: 如果后端修改了接口地址,所有组件都需要修改, 解决:使用api.js统一管理接口地址
    //缺点3:如果有token,每一次请求都需要携带请求头代码 解决:使用axios的拦截器,在请求拦截器中统一携带token
    //缺点4 如果项目中的请求顺序必须是先请求a,再请求b,可能会出现回调地狱的问题
    // 解决:使用async await来解决,可以通过他实现异步代码同步化
    // await 等待的是一个promise的结果
    // await 他需要放在async修饰的函数内
   
*/

import TopBar from "./components/TopBar";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Login from "./components/Login";
import Toast from "./components/Toast.vue";
import { mapState } from "vuex";

export default {
  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topBarKey: 0,
    };
  },

  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showModal.isShowLoginModal,
      isShowToastModal: (state) => state.showToast.isShowToastModal,
    }),
  },
  methods: {
    openWeChat() {
      this.$nextTick(() => {
        this.$refs.wxCode.weChat();
      });
      // this.$refs.wxCode.weChat();
    },
    changeCarFn() {
      this.topBarKey++;
    },
  },
  // 监听地址变化， 实现TopBar组件重载
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        if (oldVal != "/") {
          this.topBarKey++;
        }
      },
      "this.$root.count": {
        handler(newVal, oldVal) {
          // console.log(newVal, oldVal);

          this.topBarKey++;
        },
      },
    },
  },
};
</script>
<style lang="less">
// .fade-enter,
// .fade-leave-to {
//   opacity: 0;
// }
// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s ease;
// }

// .fade-enter-to,
// .fade-leave {
//   opacity: 1;
// }

.fade-enter-active {
  transition: all 0.3s ease;
}
.fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter,
.fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>